<template>
  <div class="tab-lb">
    <div class="lunbo">
      <van-swipe :autoplay="3000" :options="swiperOption" indicator-color="white">
        <van-swipe-item v-for="(item, key) in banners" :key="key">
          <img style="width: inherit; height: inherit;object-fit: contain" :src="item.pic">
        </van-swipe-item>
      </van-swipe>
    </div>


  </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    name: 'index',
    data() {
      return {
        swiperOption: {
          loop: true,
          autoplay: 3000,
          speed: 1000,
        },
        currentKey: 0,
      };
    },
    methods: {

    },
    computed: {
      ...mapState(['banners'])
    },
    created() {

      //轮播
      this.$api.getBanners({type:2});

    },
  }
</script>

<style scoped>
  .tab-lb{
    width: 100%;
    height: 130px;
    background: #CC4E40;
    padding-top: 1px;
    position: relative;
    top: -2px;
  }
  .lunbo{
    width: 94%;
    height: 138px;
    margin:20px auto;
    border-radius: 5px;
    overflow: hidden;

  }
  .lunbo img{

    height: 160px;
    display: block;
  }


</style>

